<template>
  <div class="type-container">
    <el-descriptions border class="custom-descriptions">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">申请类型</div>
        </template>
        <div class="custom-content">取消活动</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请信息正文 -->
  <div class="content-container">
    <el-descriptions border class="custom-descriptions" :column="2">
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">活动名</div>
        </template>
        <div class="custom-content">{{ activityInfo.activityName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">活动编号</div>
        </template>
        <div class="custom-content">{{ activityInfo.activityId }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">开始时间</div>
        </template>
        <div class="custom-content">{{ activityInfo.startTime }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">结束时间</div>
        </template>
        <div class="custom-content">{{ activityInfo.endTime }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">所属社团名</div>
        </template>
        <div class="custom-content">{{ activityInfo.clubName }}</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="custom-label">所属社团编号</div>
        </template>
        <div class="custom-content">{{ activityInfo.clubId }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 申请原因填写区域 -->
  <div class="reason-container">
    <el-input
        v-model="reason"
        type="textarea"
        :rows="4"
        placeholder="请输入申请原因（选填）"
    ></el-input>
  </div>

  <!-- 提交申请按钮 -->
  <div class="submit-button-container">
    <el-button type="primary" @click="submit"> 提交申请</el-button>
  </div>
</template>

<script setup lang="ts">
import {type Action, ElButton, ElInput, ElMessage, ElMessageBox} from "element-plus";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {
  type ActivityApplicationAddRequest, ActivityApplicationControllerService,
  ActivityControllerService
} from "../../../../generated";
import {useUserStore} from "../../../stores/user.ts";

interface ActivityInfo {
  activityId: number;
  activityName: string;
  startTime: string;
  endTime: string;
  clubId: number;
  clubName: string;
}

const activityInfo = ref<ActivityInfo>({
  activityId: 0,
  activityName: "",
  startTime: "",
  endTime: "",
  clubId: 0,
  clubName: "",
});

const route = useRoute();
const store = useUserStore();
const type = route.meta.type as number;  // 从路由配置的 meta 中获取 type 字段

onMounted(async () => {
  const activityIdStr = route.query.activityId as string | undefined; // 获取查询参数
  const activityId = Number(activityIdStr); // 转换为数字

  const res = await ActivityControllerService.getActivityVoById(activityId);
  if(res?.code === 0){
    activityInfo.value.activityId = res?.data?.id as number;
    activityInfo.value.activityName = res?.data?.activityName as string;
    activityInfo.value.startTime = res?.data?.startTime as string;
    activityInfo.value.endTime = res?.data?.endTime as string;
    activityInfo.value.clubId = res?.data?.clubVO?.id as number;
    activityInfo.value.clubName = res?.data?.clubVO?.clubName as string;
  } else {
    ElMessage.error("信息加载错误，请重试: " + res?.message);
  }
})

const reason = ref("");
const submit = async () => {
  const request = {
    userId: store.id,
    reason: reason.value,
    type: type,
    targetId: activityInfo.value.activityId,
  } as ActivityApplicationAddRequest

  const res = await ActivityApplicationControllerService.addApplication1(request);
  if (res.code === 0) {
    const successStr = '申请等级: 活动; 申请类型: 取消活动' + '; 申请编号:' + res.data;
    ElMessageBox.alert(
        successStr,
        "提交成功",
        {
          confirmButtonText: "确定",
          callback: (action: Action) => {
            if (action === "confirm") {
              try {
                window.close();
              } catch (e) {
                ElMessage({
                  type: "info",
                  message: "无法自动关闭页面，请手动关闭此标签页。",
                  duration: 0,
                  showClose: true,
                });
              }
            }
          },
        },
    );
  } else {
    const errorStr = '错误原因: ' + res.message;
    ElMessageBox.alert(errorStr, "提交失败", {
      confirmButtonText: "确定",
      callback: (action: Action) => {
        if (action === "confirm") {
          window.location.reload()  // 刷新当前页面
        }
      },
    })
  }
};
</script>

<style scoped lang="scss">
.view-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.type-container {
  width: 20%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.custom-label,
.custom-content {
  font-size: 15px;
}

.content-container {
  margin-top: 20px;
  margin-bottom: 40px;
}

.reason-container {
  margin-bottom: 20px;
}

.submit-button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
